
import React,{  FC,useState,useEffect } from 'react'
import { Tabs } from 'antd';
import { FileTextOutlined, SettingOutlined } from '@ant-design/icons';
import ComponentProp from './ComponentProp.tsx'
import PageSetting from './PageSetting.tsx'
import useGetComponentInfo from '../../../hooks/useGetComponentinfo.ts';

// 枚举
enum TAB_KEY {
    PROP_KEY = 'prop',
    SETTING_KEY = 'setting'
}
const RightPanel: FC = ()=>{
    const [activeKey, setActiveKey] = useState(TAB_KEY.PROP_KEY)
    const { selectedId } = useGetComponentInfo()
    useEffect(()=>{
        if(selectedId) return setActiveKey(TAB_KEY.PROP_KEY)
        else   setActiveKey(TAB_KEY.SETTING_KEY)
    },[selectedId])

    const tabsItems = [
        {
            key: TAB_KEY.PROP_KEY,
            label:(
                <span>属性</span>
            ),
            children:<ComponentProp />,
            icon: <FileTextOutlined />,
        },
        {
            key:TAB_KEY.SETTING_KEY,
            label:(
                <span>页面设置</span>
            ),
            children:<PageSetting />,
            icon: <SettingOutlined />,
        }
    ]
    return <Tabs activeKey={activeKey} items={tabsItems} />
}

export default RightPanel